let userPhone = document.querySelector('.userPhone');
let loginnn = document.querySelector('.loginnn');
let dialoggg = document.querySelector('.dialoggg');
let out = document.querySelector('.out');


loginnn.onclick = function () {

    location.href = '../html/login-dialog.html';
};
dialoggg.onclick = function () {

    location.href = '../html/login-dialog.html';
};

out.onclick = function () {

    setCookie('user', -1);
    location.reload();
};

let user = getCookie('user');
console.log(user)
if(!user){
    loginnn.style.display = 'block';
    dialoggg.style.display = 'block';
    userPhone.style.display = 'none';
    out.style.display = 'none';
}else{
    loginnn.style.display = 'none';
    dialoggg.style.display = 'none';
    userPhone.style.display = 'block';
    out.style.display = 'block';
};




let introduce = document.querySelector('.introduce');
let worksList = document.querySelector('.worksList');
let personData = document.querySelector('.personData');
let originWorksList = document.querySelector('.originWorksList');

let tagsInfo = {
    illustrator: '插画师',
    graphic: '漫画师',
    artisan: '手工艺人',
    ui_designer: 'UI设计师',
    designer: '平面设计师',
    other: '其他',
    animator: '动画师',
    game_designer: '游戏美术师',
    stylist: '造型师',
    industrial_designer: '工业设计师',
    costume_designer: '服装设计师',
    architect: '建筑师',
    interior_designer: '室内设计师',
    household_desiger: '家居设计师',
    photographer: '摄影师'
};

/* 
    - 获取用户页传递过来的参数 location.search
    - 利用字符串的方法 split ，以 = 号分割参数
    - 取索引为1的值，即取id值
*/
let userId = location.search;

console.log(userId)
let userIdArr = userId.split('=');
console.log(userIdArr)
let resId = userIdArr[1];
console.log(resId)


// 获取用户详细介绍信息数据
getUsersText();
async function getUsersText() {

    let res = await pAjax({
        url: `https://muse.huaban.com/api/v1/users/${resId}`,
    })

    // console.log(res);
    console.log(JSON.parse(res));

    // 渲染用户详细介绍信息
    renderUsersText(JSON.parse(res));
};

// 渲染用户文本详细信息的函数
function renderUsersText(params) {

    let tagStr = tags(params.category);

    function tags(a) {

        let tagsStr = a.map(b => {

            return `<span>${tagsInfo[b]}</span>`;

        }).join('');

        return tagsStr;

    };

    // 时分秒
    let d = parseInt(params.extra.response_time / (60 * 60 * 24));
    let h = parseInt((params.extra.response_time / (60 * 60)) - d * 24);
    let m = parseInt((params.extra.response_time / 60) - d * 24 * 60 - h * 60);
    let s = params.extra.response_time - d * 24 * 60 * 60 - h * 60 * 60 - m * 60;


    // 渲染星星数
    let starsStr = renderStars(params);

    function renderStars(starParams) {

        let starStr;

        // 如果存在 星星数
        if (starParams.extra.rating) {

            let stars = Math.round(starParams.extra.rating);

            switch (stars) {

                case (5):
                    starStr = `<span><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i></span>`;
                    break;
                case (4):
                    starStr = `<span><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i>★</i></span>`;
                    break;
                case (3):
                    starStr = `<span><i class="lighten">★</i><i class="lighten">★</i><i class="lighten">★</i><i>★</i><i>★</i></span>`;
                    break;
                case (2):
                    starStr = `<span><i class="lighten">★</i><i class="lighten">★</i><i>★</i><i>★</i><i>★</i></span>`;
                    break;
                case (1):
                    starStr = `<span><i class="lighten">★</i><i>★</i><i class="lighten">★</i><i>★</i><i>★</i></span>`;
                    break;
                case (0):
                    starStr = `<span><i>★</i><i>★</i><i>★</i><i>★</i><i>★</i></span>`;
                    break;
            }
        } else {
            starStr = '';
        }

        return starStr;
    };


    let str = ` <div class="information">
        <img src="https://hbimg.huabanimg.com/${params.avatar.key}_/both/140x140"
            alt="用户头像">
        <div class="information_text">
            <div class="up">
                <h3>${params.username}</h3>
                <a href="#"></a>
            </div>
            <div class="tags">
                <div class="tags_text">${tagStr}</div>
                <div class="tags_location">${params.city}</div>
            </div>
            <div class="down">
                <p>${params.desc}</p>
            </div>
        </div>
    </div>
    <div class="evaluate">
        <div class="time text">
            <div class="left">
                <i class="i1"></i>
                <span>平均响应时间</span>
            </div>
            <div class="right">
                <span>${d}天${h}时${m}分${s}秒</span>
            </div>
        </div>
        <div class="authentication text">
            <div class="left">
                <i class="i2"></i>
                <span>实名认证</span>
            </div>
            <div class="right">
                <span>已认证</span>
            </div>
        </div>
        <div class="evaluate_star text">
            <div class="left">${params.extra.rating?'<i class="i3"></i><span>评价</span>':''}</div>
            <div class="right">${starsStr}</div>
        </div>
    </div>`;

    introduce.innerHTML = str;

    let str2 = `<div class="personText">
                    <label>所在地</label>
                    <p>${params.city}</p>
                </div>
                <div class="personText">
                    <label>擅长领域</label>
                    <p>${tagStr}</p>
                </div><div class="personText">
                    <label>实名认证</label>
                    <p>已认证</p>
                </div><div class="personText">
                    <label>评分</label>
                    <p>${params.extra.rating?Math.round(params.extra.rating):'暂无评价'}</p>
                </div><div class="personText">
                    <label>响应时间</label>
                    <p>${d}天${h}时${m}分${s}秒</p>
                </div><div class="personText">
                    <label>个人简介</label>
                    <p>${params.desc}</p>
                </div>`;
    personData.innerHTML = str2
};




/* 
    - 为 选项卡 的三个选项绑定点击事件

        + 获取元素
        + 利用事件委托绑定点击事件
        + 点击 选项卡 中的各个选项时，点中的高亮，其余不高亮
        + 点中的容器显示，其他隐藏
*/
let leftMenu = document.querySelector('.leftMenu');
let selectText = document.querySelector('.selectText');
let originText = document.querySelector('.originText');
let personInfo = document.querySelector('.personInfo');

leftMenu.onclick = function (e) {

    e = event || window.event;

    if (!e.target.classList.contains('leftMenu')) {

        leftMenu.querySelector('.active').classList.remove('active');

        e.target.classList.add('active');

        if (e.target.classList.contains('selectText')) {

            worksList.style.display = 'flex';

            originWorksList.style.display = 'none';

            personData.style.display = 'none';
        } else if (e.target.classList.contains('originText')) {

            worksList.style.display = 'none';

            originWorksList.style.display = 'flex';

            personData.style.display = 'none';
        } else if (e.target.classList.contains('personInfo')) {

            worksList.style.display = 'none';

            originWorksList.style.display = 'none';

            personData.style.display = 'flex';
        }
    };
};





// 获取用户作品列表数据
getUsersWorks();
async function getUsersWorks() {

    let num = 'limit=100';

    let res = await pAjax({
        url: `https://muse.huaban.com/api/v1/users/${resId}/services/`,
        data: num
    })

    console.log(JSON.parse(res));

    renderUsersWorks(JSON.parse(res));

};

// 渲染用户作品详细列表的函数
function renderUsersWorks(params) {

    let worksStr = params.map(item => {

        return `<div class="work">
                    <a href="#">
                        <img src="https://muse-img.huabanimg.com/${item.cover[0].key}_/both/280x280"
                            alt="">
                    </a>
                    <div class="content_title">${item.name}</div>
                    <div class="content_price">${item.price == 0?'价格面议':item.price}${item.price == 0?'':' / ' + item.unit}</div>
                </div>`;
    }).join('');

    worksList.innerHTML = worksStr;
};



// 获取原创数据
getUsersOriginal();
async function getUsersOriginal() {

    let res = await pAjax({
        url: `https://muse.huaban.com/api/v1/users/${resId}/boards/`
    })

    console.log(JSON.parse(res));

    renderOriginal(JSON.parse(res));
};

// 渲染原创数据
function renderOriginal(params) {

    let originalStr = params.map(item => {

        return `<div class="originWork">
                    <a href="#">
                        <img src="https://hbimg.huabanimg.com/${item.cover.key}_/both/280x280"
                            alt="">
                    </a>
                    <div class="title_content">${item.title}</div>
                    <div class="extra_content">${item.pin_count}张图片</div>
                </div>`;
    }).join('');

    originWorksList.innerHTML = originalStr;
};